<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>state的简写</title>
</head>

<body>
  <!-- 准备一个“容器” -->
  <div id="test"></div>
</body>
<!-- react 核心库 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- react 操作dome -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.13.17/babel.min.js"></script>

<script type="text/babel">
  // 1.创建类式组件
  class Weather extends React.Component {
    // 初始化状态
    state = { isHot: false, wind: '微风' }
    render() {
      const { isHot, wind } = this.state
      return <h1 id='title' onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '寒冷'}，{wind}</h1>
    }

    // 自定义方法 -- 要用赋值语句的形式 + 箭头函数
    changeWeather = () => {
      const isHot = this.state.isHot
      this.setState({
        isHot: !isHot
      })
    }
  }
  // 2.渲染组件到页面
  ReactDOM.render(<Weather />, document.getElementById('test'))

</script>

</html>